<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        label {
            line-height: 20px;
            display: inline-block;
            margin-left: 5px;
            margin-right: 15px;
            color: #777;
        }

        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
        }

        .radio_type:before {
            content: '';
            width: 20px;
            height: 20px;
            border: 1px solid #7d7d7d;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }

        .radio_type:checked:before {
            content: '';
            width: 20px;
            height: 20px;
            border: 1px solid #c59c5a;
            background: #c59c5a;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }

        .radio_type:checked:after {
            content: '';
            width: 10px;
            height: 5px;
            border: 2px solid white;
            border-top: transparent;
            border-right: transparent;
            text-align: center;
            display: block;
            position: absolute;
            top: 6px;
            left: 5px;
            vertical-align: middle;
            transform: rotate(-45deg);
        }

        .radio_type:checked + label {
            color: #c59c5a;
        }
    </style>
</head>
<body>
<input class="radio_type" type="radio" name="type" id="radio1" checked="checked"/>
<label for="radio1">radio1</label>
<input class="radio_type" type="radio" name="type" id="radio2"/>
<label for="radio2">radio2</label>
</body>
</html>